﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:n="http://nRoute/schemas/2010/xaml" 
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
	xmlns:local_Behaviors="clr-namespace:nRoute.Samples.Netflix.Behaviors" 
	x:Class="nRoute.Samples.Netflix.MainPage" IsTabStop="True"
    mc:Ignorable="d" MinWidth="900" MinHeight="650"
    d:DesignHeight="650" d:DesignWidth="900">
	
	<i:Interaction.Behaviors>
		<n:BridgeViewModelBehavior/>
	</i:Interaction.Behaviors>

	<Grid x:Name="LayoutRoot" Background="#FF8F96A7">
		<Grid.RowDefinitions>
			<RowDefinition Height="46"/>
			<RowDefinition/>
			<RowDefinition Height="55"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="320"/>
			<ColumnDefinition Width="2"/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>

		<n:StatefulContainer x:Name="statefulContainer" Grid.Row="1" Background="White" Style="{StaticResource SidePanelNavigationContainerStyle}">
			<i:Interaction.Behaviors>
				<n:NavigationHandlerBehavior HandlerName="TopicContainer"/>
			</i:Interaction.Behaviors>
		</n:StatefulContainer>
		
		<n:BrowsingContainer x:Name="browsingContainer" Grid.Column="2" Grid.Row="1" Grid.RowSpan="2"
			Background="{StaticResource BackgroundSolidBrush}" Style="{StaticResource ContentNavigationContainerStyle}">
			<i:Interaction.Behaviors>
				<n:NavigationHandlerBehavior HandlerName="ContentContainer"/>
			</i:Interaction.Behaviors>
		</n:BrowsingContainer>
		
		<Grid Grid.Row="2">
			<Border BorderThickness="0,2,0,0" BorderBrush="Black" Background="{StaticResource SelectorBkgLinearBrush}">
				<ListBox x:Name="FeaturesListBox" Background="{x:Null}" BorderThickness="0" BorderBrush="{x:Null}" 
					ItemsSource="{Binding FeatureNodes}" ItemContainerStyle="{StaticResource FeatureItemStyle}" 
					ItemsPanel="{StaticResource FeaturesPanelTemplate}" ItemTemplate="{StaticResource FeaturesDataTemplate}"
					ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="SelectionChanged">
							<i:Interaction.Behaviors>
								<ei:ConditionBehavior>
									<ei:ConditionalExpression>
										<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=FeaturesListBox}" 
											Operator="NotEqual" RightOperand="-1"/>
									</ei:ConditionalExpression>
								</ei:ConditionBehavior>
							</i:Interaction.Behaviors>
							<n:NavigateAction HandlerName="TopicContainer" Url="{Binding SelectedItem.Url, ElementName=FeaturesListBox}"/>
						</i:EventTrigger>
						<i:EventTrigger>
							<n:SetPropertyAction PropertyName="SelectedIndex" Value="0"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</ListBox>				
			</Border>
		</Grid>
		
		<Border BorderBrush="#FF8F96A7" CornerRadius="8,8,0,0" BorderThickness="0,0,0,2">
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFCFD3DC" Offset="1"/>
					<GradientStop Color="White" Offset="0.013"/>
					<GradientStop Color="#FFEFEFF1" Offset="0.483"/>
				</LinearGradientBrush>
			</Border.Background>
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition/>
				</Grid.ColumnDefinitions>
				<TextBlock Text="{Binding Title, ElementName=statefulContainer}" Foreground="#FF85878B" FontSize="18.667" FontFamily="Trebuchet MS" TextOptions.TextHintingMode="Animated" HorizontalAlignment="Center" FontWeight="Bold" Grid.Column="1" VerticalAlignment="Center" Margin="0">
					<TextBlock.Effect>
						<DropShadowEffect ShadowDepth="1" BlurRadius="2" Color="White" Direction="-247"/>
					</TextBlock.Effect>
				</TextBlock>
				<!--<Border BorderThickness="1" BorderBrush="{StaticResource ButtonBorderBrush}" 
					Background="{StaticResource ButtonBkgBrush}" CornerRadius="4" HorizontalAlignment="Right" 
					Cursor="Hand" VerticalAlignment="Center" Height="34" Margin="0,0,8,0">    											
					<TextBlock Text="Clear" Foreground="White" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" 
						FontFamily="Trebuchet MS" TextOptions.TextHintingMode="Animated" Margin="8,0,8,1" FontWeight="Bold" 
						MaxWidth="110" TextTrimming="WordEllipsis">
						<TextBlock.Effect>
							<DropShadowEffect ShadowDepth="2" Direction="-247" BlurRadius="0" Color="#FF7E7E7E"/>
						</TextBlock.Effect>
					</TextBlock>
				</Border>-->
				<Button Content="Clear" MaxWidth="100" Style="{StaticResource BarButtonStyle}" Margin="0,0,8,0" 
					HorizontalAlignment="Right" d:LayoutOverrides="Height" VerticalAlignment="Center"  >
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="Click">
							<local_Behaviors:ClearSearchContainerAction TargetObject="{Binding ElementName=statefulContainer}"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</Button>
			</Grid>
		</Border>
		
		<Border BorderBrush="#FF8F96A7" CornerRadius="8,8,0,0" BorderThickness="0,0,0,2" Grid.Column="2">
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFCFD3DC" Offset="1"/>
					<GradientStop Color="White" Offset="0.013"/>
					<GradientStop Color="#FFEFEFF1" Offset="0.483"/>
				</LinearGradientBrush>
			</Border.Background>
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition/>
				</Grid.ColumnDefinitions>
				<!--<Grid Height="33" Margin="16,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center">				
					<Border BorderThickness="1" BorderBrush="{StaticResource ButtonBorderBrush}" 
						Background="{StaticResource ButtonBkgBrush}" CornerRadius="4" HorizontalAlignment="Left" Cursor="Hand">
					
						<Grid Margin="0">
							<TextBlock Text="Back" Foreground="White" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Trebuchet MS" TextOptions.TextHintingMode="Animated" Margin="8,0,12,1" FontWeight="Bold" MaxWidth="110" TextTrimming="WordEllipsis">
								<TextBlock.Effect>
									<DropShadowEffect ShadowDepth="2" Direction="-247" BlurRadius="0" Color="#FF7E7E7E"/>
								</TextBlock.Effect>
							</TextBlock>
							<Path Fill="{StaticResource ButtonBkgBrush}" Stretch="Fill" Stroke="{StaticResource ButtonBorderBrush}"
								HorizontalAlignment="Left" Margin="-11.156,0,0,0" Width="13.375" UseLayoutRounding="False" 
								Data="M376.91461,37.226189 L389.91824,19.13336 L377.04596,4.4774022" Height="29.586" 
								VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
								<Path.RenderTransform>
									<CompositeTransform Rotation="0" SkewX="0" SkewY="0" ScaleX="-1" TranslateX="-1.3439998626708984"/>
								</Path.RenderTransform>
							</Path>
						</Grid>
					</Border>	
					
				</Grid>-->
				<Button Content="Back" MaxWidth="195" Style="{StaticResource BackButtonStyle}" Margin="16,0,0,0" 
					HorizontalAlignment="Left" VerticalAlignment="Center">
					<i:Interaction.Behaviors>
						<local_Behaviors:NavigateBackInfoBehavior BrowsingContainer="{Binding ElementName='browsingContainer'}"/>
					</i:Interaction.Behaviors>
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="Click">
							<n:DirectionalNavigateAction HandlerName="ContentContainer"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</Button>
				<TextBlock Text="{Binding Title, ElementName=browsingContainer}" Foreground="#FF85878B" FontSize="18.667" 
					FontFamily="Trebuchet MS" TextOptions.TextHintingMode="Animated" FontWeight="Bold" 
					Grid.Column="1" VerticalAlignment="Center" Margin="210,0,225,0" TextTrimming="WordEllipsis" TextAlignment="Center">
					<TextBlock.Effect>
						<DropShadowEffect ShadowDepth="1" BlurRadius="2" Color="White" Direction="-247"/>
					</TextBlock.Effect>
				</TextBlock>
				<!--<Grid HorizontalAlignment="Right" Margin="0,8,8,8" Width="203">
					<Rectangle RadiusX="15" RadiusY="15" Stroke="#FFD4D4D4" Fill="White" />
					<Rectangle RadiusX="15" RadiusY="15" StrokeThickness="2" >
						<Rectangle.Stroke>
							<RadialGradientBrush RadiusY="0.921" RadiusX="0.991" Center="0.5,0.168" GradientOrigin="0.501,0.17">
								<GradientStop Color="#FF767676"/>
								<GradientStop Color="White" Offset="1"/>
							</RadialGradientBrush>
						</Rectangle.Stroke>
						<Rectangle.Fill>
							<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
								<GradientStop Color="#FFEFEFEF"/>
								<GradientStop Color="White" Offset="0.297"/>
							</LinearGradientBrush>
						</Rectangle.Fill>
					</Rectangle>
					<TextBlock Margin="32,0,0,0" TextWrapping="Wrap" Text="Search" FontFamily="Verdana" FontSize="16" Foreground="#FFBABABA" HorizontalAlignment="Left" VerticalAlignment="Center"/>
					<Path Data="M11,6 C11,8.7614241 8.7614241,11 6,11 C3.2385762,11 1,8.7614241 1,6 C1,3.2385762 3.2385762,1 6,1 C8.7614241,1 11,3.2385762 11,6 z M9.1339722,9.9879999 L13.508972,14.62" HorizontalAlignment="Left" Margin="10,0,0,0" Stretch="Fill" Stroke="#FF8D8C8C" StrokeThickness="2" UseLayoutRounding="False" Width="14.5" Height="15.5" VerticalAlignment="Center"/>
				</Grid>-->
				<TextBox x:Name="SearchTextBox" HorizontalAlignment="Right" Margin="86,8,8,8" 
					Width="200" Style="{StaticResource SearchTextBoxStyle}" Foreground="#FF272727">
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="TextChanged">
							<n:UpdateBindingExplicitlyAction PropertyName="Text"/>
						</i:EventTrigger>
						<n:KeyTrigger Key="Enter">
							<local_Behaviors:SearchContainerAction TargetObject="{Binding ElementName=statefulContainer}" 
								SearchText="{Binding Text, ElementName=SearchTextBox}"/>
						</n:KeyTrigger>
						<i:EventTrigger EventName="GotFocus">
							<n:TargetedSetPropertyAction TargetObject="{Binding ElementName=WatermarkText}" 
								PropertyName="Opacity" Value="0"/>
						</i:EventTrigger>
						<i:EventTrigger EventName="LostFocus">
							<n:TargetedSetPropertyAction TargetObject="{Binding ElementName=WatermarkText}" 
								PropertyName="Opacity" Value="1"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</TextBox>
				<TextBlock x:Name="WatermarkText" Margin="0,0,118,0" TextWrapping="Wrap" Text="Search" FontFamily="Verdana" 
					FontSize="16" Foreground="#FFBABABA" HorizontalAlignment="Right" VerticalAlignment="Center" IsHitTestVisible="False">
					<i:Interaction.Triggers>
						<n:ValueMatchTrigger Source="{Binding Text, ElementName=SearchTextBox}" Value="">
							<n:SetPropertyAction PropertyName="Visibility" Value="Visible"/>
						</n:ValueMatchTrigger>
						<n:ValueMatchTrigger Negate="True" Source="{Binding Text, ElementName=SearchTextBox}" Value="">
							<n:SetPropertyAction PropertyName="Visibility" Value="Collapsed"/>
						</n:ValueMatchTrigger>
					</i:Interaction.Triggers>
				</TextBlock>
			</Grid>
		</Border>
		<Border Grid.RowSpan="3" Grid.ColumnSpan="3" Background="#00000000" d:IsHidden="True">
			<i:Interaction.Behaviors>
				<n:BoolValueVisibilityBehavior Value="{Binding IsOpen, ElementName=popup}"/>
			</i:Interaction.Behaviors>
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="MouseLeftButtonDown">
					<n:TargetedSetPropertyAction TargetObject="{Binding ElementName=popup}" PropertyName="IsOpen" 
						Value="False"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Border>
		<Popup Grid.ColumnSpan="3" x:Name="popup" IsOpen="False" Grid.RowSpan="3" Margin="30" 
			HorizontalAlignment="Center" VerticalAlignment="Center" Width="700" Height="500">
			<i:Interaction.Behaviors>
				<local_Behaviors:PopupNavigationAdapterBehavior/>
				<n:NavigationHandlerBehavior HandlerName="PopupContainer"/>
			</i:Interaction.Behaviors>			
		</Popup>
		
	</Grid>
</UserControl>
